<template>
	<s-layout title="打印机设置">
		<view class="bluetooth-wrapper">
			<view v-if="printDevice" class="device-connect">
				<view class="title">已经配对设备</view>
				<view class="flex-space-between">
					<text class="device-text">
						<uni-icons custom-prefix="iconfont" size="20" type="icon-lanya"/>
						{{ printDevice.name || '' }}
					</text>
					<text class="connect-stop" @tap="cancelConnect">断开</text>
				</view>
			</view>
			<view class="flex-space-between">
				<text class="scan-device-number">共搜索到{{ deviceData.length }}个蓝牙设备</text>
				<text class="refresh-scan" @tap="handleSearchDevice">重新搜索</text>
			</view>
			<view class="device-list">
				<view
						v-for="(item, index) in deviceData"
						:key="index"
						class="flex-space-between"
						@tap="handleConnect(item)"
				>
					<uni-icons custom-prefix="iconfont" size="20" type="icon-lanya"/>
					<text class="device-text">{{ item.name }}</text>
				</view>
			</view>
			<view class="section-wrapper">
				<view>温馨提示</view>
				<view>1.首次使用需将手机与打印机配对</view>
				<view>2.打印时请保持打印机与蓝牙均属于开启状态</view>
				<view>3.未搜索到可用机型,可尝试以下解决方法:</view>
				<view class="sub">a.检查打印机是否打开状态</view>
				<view class="sub">b.关闭手机蓝牙重新打开</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
import {nextTick, onMounted, ref} from 'vue';

import {onLoad} from "@dcloudio/uni-app";

import {closePrinter, getConnName, openPrinter, scanedPrinters} from "@/static/JCAPI/JCAPIConnect"


// 可以支持的打印机及型号
const supportDevice = ['A8', 'A20', 'A63', 'B203'];

const deviceData = ref([]);
const printDevice = ref(undefined);

// 取消连接
function cancelConnect() {
	closePrinter();
	printDevice.value = undefined;
	handleSearchDevice();
}

// 搜索打印机
function handleSearchDevice() {
	uni.showLoading({
		title: '搜索打印机中...',
	});
	scanedPrinters((printers) => {
		// printers = printers.filter((val) => supportDevice.some((v) => val.name.includes(v)));
		printers = printers.filter((val) => val.name && !val.name.includes("未知设备"));

		if (printDevice.value && printDevice.value.name) {
			if (!printers.some((val) => val.deviceId === printDevice.value.deviceId)) {
				printers.unshift(printDevice.value);
			} else {
				printers = printers.filter((val) => val.deviceId !== printDevice.value.deviceId);
			}
		}
		deviceData.value = printers.reduce((res, item) => {
			if (!res.some((val) => val.deviceId === item.deviceId)) {
				res.push(item);
			}
			return res;
		}, []);
		uni.hideLoading();
		console.log(deviceData, 'deviceData');
	});
}

// 连接打印机
function handleConnect(item) {
	console.log('handleConnect', item);
	uni.showLoading({
		title: '正在连接中...',
	});
	openPrinter(
			item.name,
			() => {
				printDevice.value = item;
				deviceData.value = deviceData.value.filter((val) => val.deviceId !== item.deviceId);
				uni.hideLoading();
			},
			() => {
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					title: '打印机连接失败，请确认打印机是否开机',
				});
			},
	);
}

onMounted(() => {

});

onLoad(() => {
	nextTick(() => {
		const connDevice = getConnName();
		if (connDevice) {
			printDevice.value = connDevice;
		}
		handleSearchDevice();
	});
});
</script>

<style lang="scss">
.bluetooth-wrapper {
	height: 100vh;
	background-color: #f5f5f5;
	padding: 32px;

	> .device-connect {
		> .title {
			color: #595959;
			margin-bottom: 32px;
		}

		> .flex-space-between {
			padding: 30px;
			border-radius: 24px;
			background: #FFFFFF;

			> .connect-stop {
				padding: 12px 32px;
				border-radius: 36px;
				text-align: center;
				background-color: #ebebeb;
			}
		}
	}

	> .flex-space-between {
		display: flex;
		justify-content: space-between;
		margin-top: 42px;

		.refresh-scan {
			font-size: 16px;
			color: #3e8c80;
		}

		.scan-device-number {
			font-size: 16px;
			color: #595959;
		}
	}

	.device-list {
		margin-top: 28px;

		> .flex-space-between {
			padding: 30px;
			margin-bottom: 32px;
			justify-content: flex-start;
			border-radius: 24px;
			background: #FFFFFF;

			.device-text {
				margin-left: 17px;
				font-size: 14px;
				color: #262626;
				font-weight: 500;
			}
		}
	}

	.section-wrapper {
		margin-top: 60px;
		font-size: 14px;
		color: $uni-text-color-grey;

		> view {
			&:first-of-type {
				font-size: 16px;
				font-weight: 600;
				color: $uni-text-color;
				margin-bottom: 20px;
			}

			&.sub {
				padding-left: 40px;
			}
		}
	}
}
</style>
